<extend name="Base/base" />
<block name='head'>
    <!--日程-->
    <link rel="stylesheet" type="text/css" href="/Public/static/fullcalendar/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/Public/static/fullcalendar/css/fullcalendar.css"/>
    <link rel="stylesheet" type="text/css" href="/Public/static/fullcalendar/css/fancybox.css"/>
    <script src="/Public/static/fullcalendar/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Public/static/fullcalendar/js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Public/static/fullcalendar/js/fullcalendar.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Public/static/fullcalendar/js/jquery.fancybox-1.3.1.pack.js" type="text/javascript" charset="utf-8"></script>	
    <style>
        .textColor2{color:red}
    </style>
</block>
<block name="content" > 
    <div class="layui-larry-box mian-page page-richeng">
        <section class="larry-wrapper">
            <p class="nav-title"><span>我的日程</span></p>
            <div class="layui-row">
                <div id='calendar'></div>
            </div>
        </section>
    </div>
    <input type="hidden" id="url" value="{:U('schedule')}">
</block>
<block name="script">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
            $('span.fc-button-month').before('<span class="fc-button fc-button-add fc-state-default fc-corner-left fc-corner-right" onclick="insertEvent()">新增</span>');
            var url = $('#url').val();
            $.post(url, function (res) {
                console.log(res);
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    events: res,
                    dayClick: function (date, allDay, jsEvent, view) {
                        var selDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
                        var document_w = $(window).width();
                        var document_h = $(window).height();
                        var layer_w = '550';
                        var layer_h = '650';
                        var w = (document_w - layer_w) / 2;
                        var h = (document_h - layer_h) / 2;
                        layer.open({
                            type: 2,
                            title: [
                                "新建日程",
                                'background-color: #437dba;color:#fff;text-align:center;font-size:1.4em',
                            ],
                            area: [layer_w + 'px', layer_h + 'px'], //宽高
                            offset: [h + 'px', w + 'px'], //弹出位置 [top,left]
                            content: "/index.php/Home/Personal/event/date/" + selDate,
                        })
                    },
                    eventClick: function (event, jsEvent, view) {
                        console.log(event);
                        var id = event.id;
                        var document_w = $(window).width();
                        var document_h = $(window).height();
                        var layer_w = '550';
                        var layer_h = '650';
                        var w = (document_w - layer_w) / 2;
                        var h = (document_h - layer_h) / 2;
                        layer.open({
                            type: 2,
                            title: [
                                "查看日程",
                                'background-color: #437dba;color:#fff;text-align:center;font-size:1.4em',
                            ],
                            area: [layer_w + 'px', layer_h + 'px'], //宽高
                            offset: [h + 'px', w + 'px'], //弹出位置 [top,left]
                            content: "/index.php/Home/Personal/event/id/" + id,
                        })
                        
                    }
                });
            })
        });

        function insertEvent() {
            var selDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
            var document_w = $(window).width();
            var document_h = $(window).height();
            var layer_w = '450';
            var layer_h = '550';
            var w = (document_w - layer_w) / 2;
            var h = (document_h - layer_h) / 2;
            layer.open({
                type: 2,
                title: [
                    "新建日程",
                    'background-color: #437dba;color:#fff;text-align:center;font-size:1.4em',
                ],
                area: [layer_w + 'px', layer_h + 'px'], //宽高
                offset: [h + 'px', w + 'px'], //弹出位置 [top,left]
                content: "/index.php/Home/Personal/event/date/" + selDate,
            })
        }

//        $(document).on('click', '.fc-event-title', function () {
//            var id = $(this).attr('data-id');
//            var document_w = $(window).width();
//            var document_h = $(window).height();
//            var layer_w = '550';
//            var layer_h = '650';
//            var w = (document_w - layer_w) / 2;
//            var h = (document_h - layer_h) / 2;
//            layer.open({
//                type: 2,
//                title: [
//                    "查看日程",
//                    'background-color: #437dba;color:#fff;text-align:center;font-size:1.4em',
//                ],
//                area: [layer_w + 'px', layer_h + 'px'], //宽高
//                offset: [h + 'px', w + 'px'], //弹出位置 [top,left]
//                content: "/index.php/Home/Personal/event/id/" + id,
//            })
//        })

    </script>    
</block>

